<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复诊满意度</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script><script src="../../base.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../common/css/viewer.css" rel="stylesheet" />
    <style>
    		.evalution-item{
    			padding-top: 15px;
    			border-bottom: 1px solid #EEEEEE;
    		}
    </style>

</head>

<body>
    <div id="app" v-cloak>
    		<van-nav-bar v-if='from=="patient"' title="患者复诊" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
	        <template #right>
                <van-icon name="wap-home-o" size='18' />
	        </template>
	    	</van-nav-bar>
	    	
        <div class="container" style="padding: 0px 10px 15px 10px;">
            <div class="evalution-item">
            		<p>1.请为本次复诊的总体服务打分</p>
            		<div class="" style="padding: 10px 0;">
            			<van-rate v-model="serviceEvaluation" :size='22' color="#E22E30" void-icon="star" void-color="#eee" @change="onServiceChange" />
            		</div>
            </div>
			<div class="evalution-item">
            		<p>2.请为本次复诊的环境舒适度打分</p>
            		<div class="" style="padding: 10px 0;">
            			<van-rate v-model="comfortEvaluation" :size='22' color="#E22E30" void-icon="star" void-color="#eee" @change="onEnChange" />
            		</div>
            </div>
            <div class="evalution-item">
            		<p>3.请为本次复诊的使用设备打分</p>
            		<div class="" style="padding: 10px 0;">
            			<van-rate v-model="equipmentEvaluation" :size='22' color="#E22E30" void-icon="star" void-color="#eee" @change="onEqChange" />
            		</div>
            </div>
            <div class="evalution-item" style="border-bottom: none;">
            		<p>4.其他建议</p>
            		<div class="" style="padding: 10px 0;">
            			<van-field v-model="otherSuggest" type="textarea" maxlength="100" placeholder="请输入其他建议，不超过100字" placeholder-style='font-size: 16px !important;'
            				style='border: 1px solid #eeeeee;border-radius: 5px;padding: 5px;font-size: 16px !important;'/>
            		</div>
            </div>
            <van-button color="#E22E30" round size="large" @click="setEvalution" style='margin-top:25px;border-radius: 5px;'>提交</van-button>
        </div>
    </div>
</body>
<script src="../../common/js/index.umd.js"></script>
<script src="../../common/js/url.min.js"></script>
<script src="../../common/js/vant.min.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
        spliceUrl
    } from "../../common/js/api/vue3-axios-utils.js";

    const app = Vue.createApp({

        data() {
            return {
                url: {
                    setEvalution: "/flup/patient/evaluation/save",
                },
                serviceEvaluation:0,
		    		comfortEvaluation:0,
		    		equipmentEvaluation:0,
		    		otherSuggest:'',
            }
        },
        methods: {
            onServiceChange(value) {
		    		this.serviceEvaluation = value
		    },
		    onEnChange(value) {
		    		this.comfortEvaluation = value
		    },
		    onEqChange(value) {
		    		this.equipmentEvaluation = value
		    },
		    
		    setEvalution(){
		    		let param ={
		    			flupId:this.id,
		    			serviceEvaluation:this.serviceEvaluation,
		    			comfortEvaluation:this.comfortEvaluation,
		    			equipmentEvaluation:this.equipmentEvaluation,
		    			otherSuggest:this.otherSuggest,
		    		}
		    		if(this.serviceEvaluation!=0||this.comfortEvaluation!=0||this.equipmentEvaluation!=0){
		    			postAction(spliceUrl(this.url.setEvalution),param).then((res)=>{
	            			res = res.data
	            			if(res.success){
	            				this.$toast.success({
								message:'评价成功',
								duration:300,
								onClose:function(){
									window.location.href = './notVisitRecord.html?userid='+url('?userid')+'&flupid='+this.id+'&from='+this.from
								}
							});
	            			}else{
	            			}
	            		})
		    		}else{
		    			this.$toast({
		    				message:'请给服务打分'
		    			})
		    		}
		    		
		    }
        },

        created() {
        		this.id = url('?flupid')
				this.from = url('?from')
        },
    });
    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>